<template>
  <div class="w-full text-14px pb-80px">
    <van-tabs v-model:active="active" @change="tabsChange">
      <van-tab :title="item.name" v-for="(item, index) in tabsList">
        <div class="p-20px bg-white mt-15px" v-for="items in Info.data">
          <div
            class="flex w-full justify-between items-center pb-15px border-b"
          >
            <div>订单号：{{ items.order_no }}</div>
            <div class="text-[#F9363C]">
              <span v-show="items.state == 1">待审核</span>
              <span v-show="items.state == 2">待发货</span>
              <span v-show="items.state == 3">已发货</span>
              <span v-show="items.state == 4">已完成</span>
              <span v-show="items.state == 5">已取消</span>
            </div>
          </div>
          <div class="flex items-center mt-15px">
            <div>
              <van-image
                width="90px"
                height="90px"
                radius="10"
                :src="items.goods_image"
                fit="cover"
              />
            </div>
            <div class="ml-15px">
              <div>姓名：{{ items.name }}</div>
              <div class="mt-10px flex justify-between items-center">
                <div>手机号：{{ items.mobile }}</div>
                <div
                  class="bg-[#2E95FF] w-56px h-25px flex justify-center items-center text-white text-12px ml-15px rounded-5px"
                >
                  买家
                </div>
              </div>
              <div class="mt-10px">收货地址：{{ items.address }}</div>
            </div>
          </div>
        </div>
        <div class="mt-200px" v-show="Info.data.length <= 0">
          <nodata></nodata>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <div>
    <pagination
      @back="back"
      @next="next"
      :current_page="Info.current_page"
      :last_page="Info.last_page"
      :per_page="Info.per_page"
      :total="Info.total"
    ></pagination>
  </div>
</template>
<script setup>
import nodata from "@/components/nodata.vue";
import pagination from "@/components/pagination.vue";
import { shopRrderTh } from "@/util/api";
const active = ref("");
const tabsList = ref([
  { name: "全部" },
  {
    name: "待审核",
  },
  {
    name: "待发货",
  },
  {
    name: "已发货",
  },
  {
    name: "已完成",
  },
  {
    name: "已取消",
  },
]);
const Info = reactive({
  current_page: 0,
  last_page: 0,
  per_page: 0,
  total: 0,
  data: [],
});
const page = ref(1);
const getData = async () => {
  const res = await shopRrderTh({ page: page.value });
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  // console.log(Info);
};
const tabsChange = (v) => {
  page.value = v;
  getData();
};
const back = () => {
  page.value--;
  getData();
};
const next = () => {
  page.value++;
  getData();
};
</script>
